<template>
  <div class="sub-category">
    <van-grid :column-num="3" :gutter="10">
        <van-grid-item
         v-for="item in subCategoryList"
         :key="item.id"
         :icon="item.imageUrl"
         :text="item.title" />
    </van-grid>
  </div>
</template>

<script>
import { getSubCategories } from '@/api/home'
export default {
  name: 'SubCategory',
  data () {
    return {
      subCategoryList: []
    }
  },
  async created () {
    const { id } = this.$route.query
    const subCategory = await getSubCategories(id)
    this.subCategoryList = subCategory.categories
  },
  watch: {
    async $route (newVal) {
      const { id } = newVal.query
      const subCategory = await getSubCategories(id)
      this.subCategoryList = subCategory.categories
    }
  }
}
</script>

<style lang="less" scoped>

</style>
